<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body { height: 100%; width: 100%;margin: 0; padding: 0;font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif; -webkit-font-smoothing: antialiased;}
        .container{ display: flex; flex-direction: row; width: 100%; height: 100%; }
        .left-menu{ width: 200px; }
        .right-content{ display: flex; flex-direction: column; flex: 1; }
        .header{height: 100px;display: flex;flex-direction: row;
            background:#363f48;
        }
        .header .logo{ background: #363f48; align-content: center; justify-content: center; height: 100px; }
        .header .logo img{ width: 30px;; height: 30px; margin: 35px 35px; }
        .header .logo img:hover{
            transform: scale(1.2) rotate(1080deg);
            transition: All 1s ease-in-out;
        }
        .banner{height: 150px;background: url("../images/banner.png")}
        .footer{height: 100px;}
        .content{ flex: 1; display: flex; flex-direction:column;}
        .column:first-child { flex: 1; display: flex; }
        .carouse{ flex: 1; }
        .information{ flex: 1; }
        .column:last-child{ display: flex; }
        .recommend { flex: 1; height: 200px; }
        .search_div{
            display: flex;
            height: 150px;
            flex-direction: column;
            justify-content: space-around;

        }
        .search_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .search_box input{
            width: 30%;
            height: 50px;
            border-radius: 3px;
            outline: none;
            border: none;
        }
        .search_box a {
            display: inline-block;
            margin-left: 1%;
            border: 2px solid #5fd9cd;
            padding: 0;
            width: 160px;
            height: 50px;
            line-height: 50px;
            background: #5fd9cd;
            transition: all .3s ease-in;
            -o-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            -webkit-transition: all .3s ease-in;
            border-radius: 3px;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;

        }
        .search_box a:hover{
            background: transparent;
        }
        .search_div .search_btns {
            display: flex;
            flex-direction:row;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50px;
        }
        .search_div .search_btns a{
            display: inline-block;
            margin-left: 1%;
            border: 2px solid #ffb5a1;
            padding: 0;
            width: 100px;
            height: 25px;
            line-height: 25px;
            background: #ffb5a1;
            transition: all .3s ease-in;
            -o-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            -webkit-transition: all .3s ease-in;
            border-radius: 3px;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
        }
        .search_div .search_btns a:hover{
            background:#5fd9cd;
            border: 2px solid #5fd9cd;
        }

        .column{
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .recommend-header {
            display: flex;
            height: 50px;
            width: 70%;
            margin: 10px auto 0;
            flex-direction: row;
            align-items: center;
            text-align: center;

        }
        .recommend-header .tit {
            width: 95%;
            text-align: center;
            font-size: 22px;
            color: #5a5a5a;


        }
        .recommend-header .more {

        }

        .recommend{
            width: 70%;
            margin: 0 auto;

        }
        .recommend ul{
            padding: 0;
            display: flex;
            flex-flow: row wrap;
            align-items: stretch;
            justify-content: space-around;
        }
        .recommend ul li {
            margin: 10px;
            padding: 5px;
            width: 200px;
            height: 320px;
            background: #fffbff;
            list-style: none;
            transition: all .3s ease-in;
            -o-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            -webkit-transition: all .3s ease-in;
        }
        .recommend ul li:hover{
            background: #363f48;
            color: #ffffff;
            box-shadow:0px 10px 30px #111;
            transition: all .3s ease-in;
            -o-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            -webkit-transition: all .3s ease-in;
        }
        .recommend ul li:hover h3{
            color: #5fd9cd;
        }
        .recommend ul li:hover span,.recommend ul li:hover p{
            color: #ffffff;
        }
        .recommend ul li p,.recommend ul li span,.recommend ul li h3{
            color: #333;
        }
        .info h3{
            font-size: 14px;
            line-height: 40px;
            height: 40px;
        }
        .info p{
            line-height: 20px;
            height: 40px;
            color: #777;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /* -webkit-line-clamp: 3; */
            -webkit-box-orient: vertical;
            -webkit-transition: all .4s ease;
            -moz-transition: all .4s ease;
            -o-transition: all .4s ease;
            transition: all .4s ease;
        }
        .recommend ul li:hover img{
            transform: rotate(8deg);
            transition: all .3s ease-in;
            -o-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            -webkit-transition: all .3s ease-in;
        }

        .recommend ul li a{
            width: 100%;
            display: flex;
            flex-flow: column;
        }
        .recommend ul li img {
            width: 120px;
            height: 120px;
            align-self: center;
            margin:20px auto 10px;
        }
        .recommend ul li a{
            text-decoration: none;
        }

        .recommend ul li a .status_bar {
            display: flex;
            justify-content: space-between;
        }

        .cates{
            display: inline-block;

        }
        .cates a{
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            color: #fff;
            margin-left: 4px;
            background: #4eaade;
            border-radius: 3px;
            padding: 0 4px;
            transition: all .3s ease-in;
            -o-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            -webkit-transition: all .3s ease-in;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="left-menu" style="background: #5fd9cd;display: none">
        leftmenu
    </div>
    <div class="right-content">
        <div class="header">
            <div class="logo">
                <img src="../images/hamber.png" alt="暂开">
            </div>
        </div>
        <div class="banner">
            <div class="search_div">
                <div class="search_box">
                    <input type="text" placeholder="请输入关键字">
                    <a href="javascript:;">搜索</a>
                </div>
                <div class="search_btns">
                    <a href="javascript:;">应用软件</a>
                    <a href="javascript:;">媒体工具</a>
                    <a href="javascript:;">网络工具</a>
                    <a href="javascript:;">开发工具</a>
                    <a href="javascript:;">图形设计</a>
                    <a href="javascript:;">行业软件</a>
                    <a href="javascript:;">安全防护</a>
                    <a href="javascript:;">系统工具</a>
                    <a href="javascript:;">游戏</a>
                    <a href="javascript:;">免费精品</a>
                </div>
            </div>
        </div>
        <div class="content" style="background: #ffeb3b">
          <!--  <div class="column" style="background: #ff7a37">
                <div class="carouse" style="background: #42a5f5">carouse</div>
                <div class="information" style="background: #f51de0">recommend</div>
            </div>-->
            <div class="column" style="background: #ffb5a1">
                <div class="recommend-header">
                    <span class="tit">最新应用</span>
                    <span class="more">更多</span>
                </div>
                <div class="recommend">
                    <ul>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                        <li>
                            <div class="main">
                                <a href="javascript:;" class="img_tilte">
                                    <img class="lim-icon" src="http://img.xclient.info/attachment/2017/05/5c8682de-5160-bdfd-c5fd-d367afc35291.png">
                                    <div class="status_bar">
                                        <span class="item download"> <i class="icon-download"></i>8</span>
                                        <span class="item date"> <i class="icon-date"></i> 2017-05-31</span>
                                    </div>
                                    <div class="info">
                                        <h3>不错的CAD绘图工具</h3>
                                        <p>在所有工业类型中实现您的在所有工业类型中实现您的 CAD 目标。</p>
                                    </div>
                                </a>
                                <div class="cates"><a href="http://xclient.info/s/c/design/">图形设计</a></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--<div class="footer" style="background: #aa224f">footer</div>-->
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        $('.logo img').on('click',function(){
            $('.left-menu').toggle('slow');
        })
    });

    function showLeftMenu(){
        $('.left-menu').show('slow')
    }
    function hideLeftMenu(){
        $('.left-menu').hide('slow')
    }
</script>
</html>